<template>
  <div class="barcode-wrapper">
      <img :style="widthStyleObj" class="barcode" />
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
export default {
  props: {
      value: {},
      JsBarcodeData: {
        type: Object,
      },
      widthStyleObj: {},
      background: {},
      lineColor: {},
      height: {
        type: Number,
        default: 100
      },
      // 下方显示文字
      displayValue: {
        type: Boolean,
        default: false
      }
  }, 
  watch: {
    value: {
      immediate: true,
      handler() {
        this.drawBarcode()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawBarcode()
    })
  },
  methods: {
    drawBarcode() {
      JsBarcode('.barcode', String(this.value), {     
              // format: "CODE39",//选择要使用的条形码类型 --  default: "auto" (CODE128)
              // width:1,//设置条之间的宽度
              height: this.height,//高度
              displayValue: this.displayValue ,//是否在条形码下方显示文字
        //   text:"456",//覆盖显示的文本
        //   fontOptions:"bold italic",//使文字加粗体或变斜体
        //   font:"fantasy",//设置文本的字体
        //   textAlign:"left",//设置文本的水平对齐方式
        //   textPosition:"top",//设置文本的垂直位置
        //   textMargin:5,//设置条形码和文本之间的间距
              fontSize:15,//设置文本的大小
              background: this.background,//设置条形码的背景
              lineColor: this.lineColor,//设置条和文本的颜色。
              margin:0//设置条形码周围的空白边距
        });
    }
  }
}
</script>
<style scoped>
.barcode-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* .barcode {
  max-width: 375px !important
} */
</style>